<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>数组的一些方法</title>
</head>
<body>
  <script>
    // push slice pop shift unshift splice toString join reverse
    // reduce reduceRight sort find filter fill every some concat entries includes indexOf keys values
    const arr = [1, 2, 3];
    arrPush = arr.push(4); // arr: [1, 2, 3, 4] arrPush: 4 push改变原数组
    console.log(arr, arrPush);
    arrSlice = arr.slice(0, -1);
    console.log(arr, arrSlice); // arr: [1, 2, 3, 4] arrSlice: [1, 2, 3] // slice不改变原数组
    arrPop = arr.pop(); // 不接受任何参数
    console.log(arr, arrPop); // arr: [1, 2, 3] arrPop: 3 // pop改变原数组
    arrConcat = arr.concat(4);
    console.log(arr, arrConcat); // arr: [1, 2, 3] arrConcat: [1, 2, 3, 4] // concat不改变原数组
    arrSpliceDelete = arr.splice(2, 1);
    console.log(arr, arrSpliceDelete); // arr: [1, 2] arrSpliceDelete: [3] // splice改变原数组
    arrSpliceAdd = arr.splice(2, 1, 3);
    console.log(arr, arrSpliceAdd); // arr: [1, 2, 3] arrSpliceAdd: [] //
    arrReverse = arr.reverse();
    console.log(arr, arrReverse); // arr: [3, 2, 1] arrReverse: [3, 2, 1] // reverse改变原数组
    arrJoin = arr.join(',');
    console.log(arr, arrJoin); // arr: [3, 2, 1] arrJoin: '3,2,1' // join不改变原数组
    arrShift = arr.shift(2); // shift方法不接受任何参数，总是拿掉数组的第一个值
    console.log(arr, arrShift); // arr: [2, 1] arrShift: 3 shift:改变原数组
    arrUnshift = arr.unshift(3);
    console.log(arr, arrUnshift); // arr: [3, 2, 1] arrUnshift: 3
    arrFill = arr.fill(4);
    console.log(arr, arrFill); // arr: [4, 4, 4] arrFill: [4, 4, 4] // fill改变原数组

    // 总结：push、pop、shift、unshift、splice、reverse、fill改变原数组
    // slice、join、concat不改变原数组

    // flat 扁平化

    // Array.from

    const a = {1: 123, 4: 345, 7: 567, 12: 111222};
    const b = Array.from({...a, length: 12}).slice(1); // [123, undefined, undefined, 345, undefined, undefined, 567, undefined, undefined, undefined, undefined, 111222]

  </script>
</body>
</html>